<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的订单</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/vant.min.js"></script>
		<script src="html5plus://ready"></script>		
		<script src="../../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/fanhui.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#top{
				height: 60px;
				width: 100%;
				background-color: red;
			}
			#spadd {
				width: 100%;
				text-align: center;
			}
			#zfsc{
				position: relative;
				margin-top: 10px;
				left: 66%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<van-nav-bar  @click-left="onClickLeft" title="我的订单" left-text="返回" left-arrow id="a">
			</van-nav-bar>
			<div id="top">
				
			</div>
			<van-cell-group v-for="item in goods" :key="item.id" :name="item.id">
				<van-cell :title="item.title" :value="item.value" :label="item.label">
				</van-cell>
				<div class="card-goods__item">
					<van-card :title="item.title" :num="item.num" :origin-price="item.ori_price" :desc="item.desc" :price="item.price"
					 :thumb="item.thumb">
					</van-card>
					<div id="spadd">
						共{{item.num}}件商品，合计{{item.num*item.price}}（含运费￥0.00）
					</div>
					<div id="zfsc">
						<van-button plain type="primary">支   付</van-button>
						<van-button type="danger">删除订单</van-button>
					</div>
				</div>

			</van-cell-group>

		</div>

		<script>
			var app = new Vue({
				el: "#app",
				data: {
					goods: [{
						id: '1',
						title: '订单编号',
						value: '未支付',
						label: '201903272019032720190327',
						title: '进口香蕉',
						desc: '约250g，2根',
						price: 20,
						num: 1,
						ori_price: 200.00,
						views: 9999,
						thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg'
					}, {
						id: '2',
						title: '订单编号',
						value: '未支付',
						label: '201903282019032820190328',
						title: '陕西蜜梨',
						desc: '约600g',
						num: 1,
						price: 69.00,
						ori_price: 690.00,
						views: 99999,
						thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg'
					}, {
						id: '3',
						title: '订单编号',
						value: '已支付',
						label: '201903292019032920190329',
						title: '美国伽力果',
						desc: '约680g/3个',
						num: 1,
						price: 268.00,
						ori_price: 2680.00,
						views: 99999,
						thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
					}]
				},
				computed: {
					submitBarText() {
						const count = this.checkedGoods.length;
						return '结算' + (count ? `(${count})` : '');
					},
					totalPrice() {
						return this.goods.reduce((total, item) => total + (this.checkedGoods.indexOf(item.id) !== -1 ? item.price : 0),
							0);
					}
				},
				
				methods:{
					onClickLeft:function(){
						plus.webview.close(plus.webview.currentWebview(), "slide-out-left");
					}
				}
			})
		</script>
	</body>
</html>
